<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="google" value="notranslate" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Fast Admin</title>
	</head>
	<body>
		<div id="app">
			<script>
				var userAgent = window.navigator.userAgent;
				// "MSIE" IE10及更早的版本，"Trident/" IE11
				if (userAgent.indexOf("MSIE ") !== -1 || userAgent.indexOf("Trident/") !== -1) {
					document.body.innerHTML =
						'<div style="text-align: center; margin-top: 5%;"><h1>不支持 IE 浏览器</h1><h4>请使用现代浏览器（如 Chrome、Firefox、Edge 等）访问此页面。</h4></div>';
					throw new Error("不支持 IE 浏览器，请使用现代浏览器（如 Chrome、Firefox、Edge 等）访问此页面。");
				}
				// 旧版 Chrome 检测
				var match = userAgent.match(/Chrome\/(\d+)/);
				if (match && parseInt(match[1], 10) < 86) {
					document.body.innerHTML =
						'<div style="text-align: center; margin-top: 5%;"><h1>不支持旧版 Chrome</h1><h4>请使用最新的现代浏览器（如 Chrome、Firefox、Edge 等）访问此页面。</h4></div>';
					throw new Error("不支持旧版 Chrome，请使用最新的现代浏览器（如 Chrome、Firefox、Edge 等）访问此页面。");
				}
			</script>
			<style>
				html,
				body,
				#app {
					margin: 0;
					padding: 0;
					width: 100%;
					height: 100%;
				}
				.loading {
					width: 100%;
					height: 100%;
					position: fixed;
					background-color: #f5f5f5;
					z-index: 9990;
				}
				.loading .loading-box {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.loading .loading-box .loading-box-warp {
					width: 80px;
					height: 80px;
				}
				@keyframes loading-animation {
					0% {
						background-position:
							0 0,
							0 100%,
							100% 100%;
					}
					25% {
						background-position:
							100% 0,
							0 100%,
							100% 100%;
					}
					50% {
						background-position:
							100% 0,
							0 0,
							100% 100%;
					}
					75% {
						background-position:
							100% 0,
							0 0,
							0 100%;
					}
					100% {
						background-position:
							100% 100%,
							0 0,
							0 100%;
					}
				}
				.loading .loading-box .loading-box-warp .loading-box-item {
					width: 55px;
					aspect-ratio: 1;
					--g1: conic-gradient(from 90deg at 3px 3px, #0000 90deg, #409eff 0);
					--g2: conic-gradient(from -90deg at 22px 22px, #0000 90deg, #409eff 0);
					background: var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2);
					background-size: 25px 25px;
					background-repeat: no-repeat;
					animation: loading-animation 1.2s infinite;
				}
			</style>
			<div class="loading">
				<div class="loading-box">
					<div class="loading-box-warp">
						<div class="loading-box-item"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>
